import React, { Component } from 'react'
import { Modal, Table, Steps } from 'antd'
import { connect } from 'dva'
import columns from '../property/propList/columns'

const { Step } = Steps

@connect(({ loading, approve }) => ({
  approve,
  loading: loading.models.approve,
}))
export default class PropModal extends Component {
  // 关闭窗口
  handleClose = () => {
    this.props.modalCloseCallback()
  }

  renderStep = () => {
    const { currentSteps } = this.props.approve

    const stepNo = currentSteps.length < 1 ? 0 : currentSteps.length - 1

    return (
      <div
        style={{
          marginBottom: 20,
          width: currentSteps.length !== 0 ? `${(currentSteps.length / 4) * 100}%` : 'auto',
        }}
      >
        <Steps current={stepNo}>
          {currentSteps.map(item => (
            <Step
              title={item.createUsersEntity.realityName}
              description={
                <div style={{ width: 200 }}>
                  <div>{item.createUsersEntity.mobile}</div>
                  <div>{item.gmtCreateStr}</div>
                  <div>{item.remark}</div>
                </div>
              }
              status={item.status === '0000' ? 'error' : 'finish'}
            />
          ))}
        </Steps>
      </div>
    )
  }

  // 渲染界面
  render() {
    const { loading, showModal } = this.props
    const { currentProps } = this.props.approve
    return (
      <Modal
        maskClosable={false}
        confirmLoading={loading}
        onCancel={() => this.handleClose()}
        visible={showModal}
        width={1000}
        title="资产列表"
        footer={null}
      >
        {this.renderStep()}
        <Table
          loading={loading}
          size="small"
          bordered
          dataSource={currentProps}
          rowKey={record => record.id}
          columns={columns}
          pagination={false}
          onChange={this.handleListChange}
        />
      </Modal>
    )
  }
}
